<template>
  <div class="app-container">
    <el-button style="" type="text" @click="openAcaDiag">添加学院</el-button>
    <ul class="chanpterList">
      <li
        v-for="academy in List"
        :key="academy.id">
        <p>
          {{ academy.name }}
          <span class="acts">
                    <el-button style="" type="text" @click= "openMajDiag(academy.id)">添加专业</el-button>
                    <el-button style="" type="text"@click="openAcaEditDiag(academy.id)" >编辑</el-button>
                    <el-button type="text"@click="deleteAcademy(academy.id)" >删除</el-button>
                </span>
        </p>

        <!-- 视频 -->
        <ul class="chanpterList videoList ">
          <li
            v-for="major in academy.children"
            :key="major.id">
            <p>{{ major.name }}

              <span class="acts">
                    <el-button  type="text"@click="openClaDiag(major.id,academy.id)">添加班级</el-button>
                    <el-button style=""  type="text"@click="openMajEditDiag(major.id)" >编辑</el-button>
                    <el-button type="text"@click="deleteMaj(major.id)" >删除</el-button>
              </span>
            </p>
            <ul class="chanpterList videoList paperList" >
              <li
                v-for="clas in major.children"
                :key="clas.id">

                <p>
                  {{ clas.name }}
                  <span class="acts">
                     <el-button style="" @click="openTeacherDiag(clas.id)" type="text">教师列表查看</el-button>
                     <el-button style="" @click="openClaEditDiag(clas.id)" type="text">编辑</el-button>
                    <el-button type="text" @click="deleteCla(clas.id)">删除</el-button>
                  </span>
                </p>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
    <el-dialog :visible.sync="dialogAcademy" title="学院添加" width="80%">
      <el-form :model="academy" label-width="90px">
        <el-form-item label="学院名">
          <el-input v-model="academy.name"/>
        </el-form-item>
        <el-form-item label="学院简介">
          <el-input v-model="academy.intro"/>
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number v-model="academy.sort" :min="0" controls-position="right"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAcademy= false">取 消</el-button>
        <el-button :disabled="saveAcaBtnDisabled" type="primary" @click="saveOrUpdateAcademy">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="dialogMajdemy" title="专业添加" width="80%">
      <el-form :model="major" label-width="90px">
        <el-form-item label="专业名">
          <el-input v-model="major.name"/>
        </el-form-item>
        <el-form-item label="专业简介">
          <el-input v-model="major.intro"/>
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number v-model="major.sort" :min="0" controls-position="right"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogMajdemy = false">取 消</el-button>
        <el-button :disabled="saveMajBtnDisabled" type="primary" @click="saveOrUpdateMaj">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="dialogClademy" title="班级添加" width="80%">
      <el-form :model="classs" label-width="90px">
        <el-form-item label="班级名">
          <el-input v-model="classs.name"/>
        </el-form-item>
        <el-form-item label="班级简介">
          <el-input v-model="classs.intro"/>
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number v-model="classs.sort" :min="0" controls-position="right"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogClademy = false">取 消</el-button>
        <el-button :disabled="saveClaBtnDisabled" type="primary" @click="saveOrUpdateCla">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="dialogTeacheradd" title="班级 教师添加" width="80%">
    <el-form :model="teacheradd" label-width="90px">
      <el-form-item label="教师">
        <el-select
          v-model="teacheradd.teacher"
          placeholder="请选择"
        >
          <el-option
            v-for="cla in teachers"
            :key="cla.id"
            :label="cla.name"
            :value="cla.id"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogTeacher= false">取 消</el-button>
      <el-button :disabled="saveTeaBtnDisabled" type="primary" @click="saveOrUpdateTeacher">确 定</el-button>
    </div>
  </el-dialog>

    <el-dialog :visible.sync="dialogTeacher" title="班级 教师列表" width="80%">
      <el-button @click="opendialogTeacheradd">班级 教师添加</el-button>
      <el-table
        :data="teacher_class"
        border
        fit
        highlight-current-row>
        <el-table-column prop="teacher" label="教师" />
        <el-table-column prop="classs" label="班级" width="60" />
        <el-table-column prop="gmtCreate" label="添加时间" width="160"/>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import Academy from "../../../api/edu/Academy";
import major from "../../../api/edu/major";
import classs from "../../../api/edu/classs";
import teacher from "../../../api/edu/teacher";
export default {

  data() {
    return {
      dialogTeacheradd:false,
      saveTeaBtnDisabled:false,
      dialogTeacher:false,
      dialogAcademy:false,
      dialogAcademyEdit:false,
      saveAcaBtnDisabled:false,

      dialogMajdemy:false,
      dialogMajEdit:false,
      saveMajBtnDisabled:false,

      dialogClademy:false,
      dialogClaEdit:false,
      saveClaBtnDisabled:false,

      List: [],  //返回所有分类数据
      academy:{
        name:'',
        intro:'',
        sort:'',
      },
      major:{
        academyId:'',
        name:'',
        intro:'',
        sort:'',
      },
      classs:{
        academyId:'',
        majorId:'',
        name:'',
        intro:'',
        srot:'',
      },
      teachers:'',
      classsId:'',
      teacher_class:null,
      teacheradd:{
        teacher:'',
        classs:''
      }

    }
  },
  created() {
    this.getAllList()
  },
  methods: {
    getTeacherClass(){
        classs.getClassByclasss(this.classsId).then(res=>{
          this.teacher_class=res.data.classs
        })
},
    opendialogTeacheradd(){
      this.dialogTeacheradd=true
      this.teacheradd.classs=this.classsId
    },

    addTeacher_class(){
      classs.addTeacher_class(this.teacheradd).then(res=>{
        this.dialogTeacheradd=false
        this.$message({
          type: 'success',
          message: '添加教师成功!'
        });
        //刷新页面
        this.getTeacherClass()
      })

    },
    updateTeacher_class(){

    },
    saveOrUpdateTeacher(){
      if(!this.teacheradd.id){
        this.addTeacher_class()
      }else{
        this.updateTeacher_class()
      }
    },
    openTeacherDiag(id){

      this.dialogTeacher=true
      this.classsId=id
      this.getTeacherClass()
      this.getAllTeacher()

    },
    getAllTeacher(){
      teacher.getListTeacher().then(res=>{
        this.teachers=res.data.teachers
      })
    },
    getAllList() {
      Academy.getAll()
        .then(response => {
          this.List = response.data.academys
        })
    },
    openAcaDiag(){
      this.dialogAcademy=true
    },
    openAcaEditDiag(id){
      this.dialogAcademy=true
      Academy.getByAcademyById(id).then(res=>{
        this.academy=res.data.academy
      })

    },

    saveOrUpdateAcademy(){
      if(!this.academy.id){
        this.addAcademy()
      }else{
        this.updateAcademy()
      }

    },
    addAcademy(){
      Academy.addAcademy(this.academy).then(res=>{
        this.dialogAcademy=false
        this.$message({
          type: 'success',
          message: '添加学院成功!'
        });
        //刷新页面
        this.getAllList()
        this.academy.name=''
      })
    },
    updateAcademy(){
      Academy.updateAcademy(this.academy).then(res=>{
        this.dialogAcademy = false
        //提示
        this.$message({
          type: 'success',
          message: '修改学院成功!'
        });
        //刷新页面
        this.getAllList()
      })
    },
    deleteAcademy(id){
      this.$confirm('此操作将删除学院, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {  //点击确定，执行then方法
        //调用删除的方法
        Academy.deleteAcademy(id)
          .then(response =>{//删除成功
            //提示信息
            this.$message({
              type: 'success',
              message: '删除学院成功!'
            });
            //刷新页面
            this.getAllList()
          })
      }) //点击取消，执行catch方法
    },

    openMajDiag(id){
      this.dialogMajdemy=true
      this.major.academyId=id
    },
    openMajEditDiag(id){
      this.dialogMajdemy=true
      major.getByMajorById(id).then(res=>{
        this.major=res.data.major
      })

    },
    saveOrUpdateMaj(){
      if(!this.major.id){
        this.addMaj()
      }else{
        this.updateMaj()
      }

    },
    addMaj(){
     major.addMajor(this.major).then(res=>{
        this.dialogMajdemy=false
        this.$message({
          type: 'success',
          message: '添加学院成功!'
        });
        //刷新页面
        this.getAllList()
       this.major.name=''
      })
    },
    updateMaj(){
      major.updateMajor(this.major).then(res=>{
        this.dialogMajdemy = false
        //提示
        this.$message({
          type: 'success',
          message: '修改专业成功!'
        });
        //刷新页面
        this.getAllList()
      })
    },
    deleteMaj(id){
      this.$confirm('此操作将删除专业, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {  //点击确定，执行then方法
        //调用删除的方法
       major.deleteMajor(id)
          .then(response =>{//删除成功
            //提示信息
            this.$message({
              type: 'success',
              message: '删除专业成功!'
            });
            //刷新页面
            this.getAllList()
          })
      }) //点击取消，执行catch方法
    },
    openClaDiag(majorId,academyId){
      this.dialogClademy=true
      this.classs.academyId=academyId
      this.classs.majorId=majorId
    },
    openClaEditDiag(id){
      this.dialogClademy=true
  classs.getByClasssById(id).then(res=>{
        this.classs=res.data.classs
      })

    },
    saveOrUpdateCla(){
      if(!this.classs.id){
        this.addCla()
      }else{
        this.updateCla()
      }

    },
    addCla(){
    classs.addClasss(this.classs).then(res=>{
        this.dialogClademy=false
        this.$message({
          type: 'success',
          message: '添加班级成功!'
        });
        //刷新页面
        this.getAllList()
      this.classs.name=''
      })
    },
    updateCla(){
      classs.updateClasss(this.classs).then(res=>{
        this.dialogClademy = false
        //提示
        this.$message({
          type: 'success',
          message: '修改班级成功!'
        });
        //刷新页面
        this.getAllList()
      })
    },
    deleteCla(id){
      this.$confirm('此操作将删除班级, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {  //点击确定，执行then方法
        //调用删除的方法
      classs.deleteClasss(id)
          .then(response =>{//删除成功
            //提示信息
            this.$message({
              type: 'success',
              message: '删除学院成功!'
            });
            //刷新页面
            this.getAllList()
          })
      }) //点击取消，执行catch方法
    }

  }
}
</script>
<style scoped>
.chanpterList{
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}
.chanpterList li{
  position: relative;
}
.chanpterList p{
  float: left;
  font-size: 20px;
  margin: 10px 0;
  padding: 10px;
  height: 70px;
  line-height: 50px;
  width: 100%;
  border: 1px solid #DDD;
}
.chanpterList .acts {
  float: right;
  font-size: 14px;
}

.videoList{
  padding-left: 80px;
}
.videoList p{
  float: left;
  font-size: 14px;
  margin: 10px 0;
  padding: 10px;
  height: 60px;
  line-height: 30px;
  width: 100%;
  border: 1px dotted #DDD;
}
.paperList{
  padding-left: 100px;

}
.paperList p{
  height: 55px;
}

</style>
